<template>
	<div id="appRoot">
		<sidebar>
			<card label="会员管理">
				<div class="from-query">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="搜索">
							<el-input size="small" v-model="queryData.phone" placeholder="会员帐号/手机号"></el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-radio-group v-model="queryData.state">
								<el-radio label="-1">全部</el-radio>
								<el-radio label="2">过期</el-radio>
								<el-radio label="1">有效</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="注册时间">
							<el-date-picker
									size="small"
									v-model="queryDate"
									type="daterange"
									placeholder="选择时间范围">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="getTableData(1)">查询</el-button>
						</el-form-item>
					</el-form>
				</div>
			</card>
			<div class="table-container" v-loading.body="loading">
				<template v-if="tableDataError">
					<table-data-fail type="error"></table-data-fail>
				</template>
				<template v-else-if="tableData.length > 0">
					<el-table
							:data="tableData"
							stripe
							border
							style="width: 100%">
						<el-table-column
								prop="account"
								align="center"
								header-align="left"
								label="用户名">
						</el-table-column>
						<el-table-column
								prop="addr"
								align="center"
								header-align="left"
								label="所在地">
						</el-table-column>
						<el-table-column
								prop="company"
								align="center"
								header-align="left"
								label="单位">
						</el-table-column>
						<el-table-column
								prop="duties"
								align="center"
								header-align="left"
								label="职务">
						</el-table-column>
						<el-table-column
								prop="phone"
								align="center"
								header-align="left"
								width="150px"
								label="手机号码">
						</el-table-column>
						<el-table-column
								align="center"
								header-align="left"
								label="注册时间">
							<template scope="scope">
								{{scope.row.date+' '+scope.row.time}}
							</template>
						</el-table-column>
						<el-table-column
								prop="loginTimes"
								align="center"
								header-align="left"
								label="登录次数">
						</el-table-column>
						<el-table-column
								prop="expDate"
								align="center"
								header-align="left"
								width="150px"
								label="到期时间">
						</el-table-column>
						<el-table-column
								prop="state"
								align="center"
								header-align="left"
								label="状态">
						</el-table-column>
						<el-table-column
								align="center"
								header-align="left"
								label="操作">
							<template scope="scope">
								<el-button type="text" size="small" @click="openDialogDelay(scope.row.userId, scope.row.expDate)">延期</el-button>
								<el-button type="text" size="small" @click="openDialogMemberDetail(scope.row.userId)">详情</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="pagination-wrapper">
						<el-pagination
								@current-change="getTableData"
								:current-page.sync="paginationData.currentPage"
								:page-size="paginationData.pageSize"
								layout="prev, pager, next, jumper"
								:total="paginationData.total">
						</el-pagination>
					</div>
				</template>
				<template v-else>
					<table-data-fail type="empty"></table-data-fail>
				</template>
			</div>
		</sidebar>
		<el-dialog title="延期" :visible.sync="dialogDelayVisible" class="dialog-form">
			<el-form :model="dialogDelayData" label-width="120px">
				<el-form-item label="VIP到期时间：">
					<span>{{dialogDelayExpDate}}</span>
				</el-form-item>
				<el-form-item label="延长有效期至：">
					<el-date-picker
							v-model="dialogDelayData.delayDate"
							type="date"
							:picker-options="delayDateOption"
							placeholder="选择日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeDialogDelay()">取 消</el-button>
				<el-button type="primary" @click="submitDelay()">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="会员详情" :visible.sync="dialogMemberDetailVisible" class="dialog-form-user">
			<el-form label-width="130px">
				<el-form-item label="用户名：">
					{{dialogMemberDetail.account}}
				</el-form-item>
				<el-form-item label="手机号：">
					{{dialogMemberDetail.phone}}
				</el-form-item>
				<el-form-item label="所在地：">
					{{dialogMemberDetail.addr}}
				</el-form-item>
				<el-form-item label="单位：">
					{{dialogMemberDetail.company}}
				</el-form-item>
				<el-form-item label="职务：">
					{{dialogMemberDetail.duties}}
				</el-form-item>
				<el-form-item label="注册时间：">
					{{dialogMemberDetail.regDate}}
				</el-form-item>
				<el-form-item label="登录次数：">
					{{dialogMemberDetail.loginTimes}}
				</el-form-item>
				<el-form-item label="VIP有效期至：">
					{{dialogMemberDetail.expDate}}
				</el-form-item>
			</el-form>
			<div class="user-vip-record">
				<h2>VIP记录：</h2>
				<div class="record-wrapper">
					<el-row v-for="(item, index) in dialogMemberDetail.items" :key="index">
						<el-col :span="5">{{item.date}}</el-col>
						<el-col :span="5">{{item.operType}}</el-col>
						<el-col :span="14">{{item.desc}}</el-col>
					</el-row>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="closeDialogMemberDetail">关闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import moment from 'moment'
	import sidebar from 'components/layout/sidebar.vue'
	import card from 'components/layout/card.vue'
    import tableDataFail from 'components/layout/tableDataFail.vue'
    import ajax from 'common/ajax.js'
    import ajaxUrls from 'common/ajaxUrls.js'
	export default{
		data(){
			return{
                delayDateOption: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
				},
				loading: false,
				queryDate: [],
				queryData: {
					phone: '',
                    state: '-1',
                    startDate: '',
                    endDate: ''
				},
				paginationData:{
					currentPage: 1,
					pageSize: 10,
					total: 0
				},
				tableDataError: false,
				tableData: [],

                dialogDelayVisible: false,
                dialogDelayExpDate: '',
				dialogDelayData:{
                    delayDate: '',
                    userId: ''
				},
                dialogMemberDetailVisible: false,
				dialogMemberDetail:{
                    account: '',
                    phone: '',
                    addr: '',
                    company: '',
                    duties: '',
                    regDate: '',
                    loginTimes: '',
                    expDate: '',
                    items: []
				}
			}
		},
        mounted(){
            this.getTableData();
        },
		filters:{
            state(val){
                val = Number(val);
                let text = '';
                switch (val){
					case 1:
					    text = '有效';
					    break;
					case 2:
                        text = '过期';
                        break;
					default:
					    break;
				}
				return text;
			}
		},
		methods: {
            openDialogDelay(userId, date){
				this.dialogDelayExpDate = date;
				this.dialogDelayData.userId = userId;
				this.dialogDelayVisible = true;
			},
			closeDialogDelay(){
                this.dialogDelayExpDate = '';
                this.dialogDelayData.userId = '';
                this.dialogDelayData.delayDate = '';
                this.dialogDelayVisible = false;
			},
            submitDelay(){
                this.dialogDelayData.delayDate = moment(this.dialogDelayData.delayDate).format('YYYY-MM-DD');
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.member,
                    action: 'delayUserInfo',
                    data: this.dialogDelayData
                }).then(function (data) {
                    this.closeDialogDelay();
                    this.getTableData();
                }.bind(this)).catch(function (err) {

                })
			},

			openDialogMemberDetail(userId){
                this.dialogMemberDetailVisible = true;
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.member,
                    action: 'qryUserInfoDtl',
                    data: {userId: userId}
                }).then(function (data) {
                    this.dialogMemberDetail = data.data;
                }.bind(this)).catch(function (err) {

                })
			},
			closeDialogMemberDetail(){
                this.dialogMemberDetailVisible = false;
                this.dialogMemberDetail = {
                    account: '',
                    phone: '',
                    addr: '',
                    company: '',
                    duties: '',
                    regDate: '',
                    loginTimes: '',
                    expDate: '',
                    items: []
                };
			},
            getTableData(current){
			    if(this.queryDate[1]){
                    this.queryData.startDate = moment(this.queryDate[0]).format('YYYY-MM-DD');
                    this.queryData.endDate = moment(this.queryDate[1]).format('YYYY-MM-DD');
				}else{
                    this.queryData.startDate = '';
                    this.queryData.endDate = '';
                }
                let data = {
                    pageNum: current || this.paginationData.currentPage,
                    pageRow: this.paginationData.pageSize
                };
                data = Object.assign(data, this.queryData);
                ajax({
                    method: 'post',
                    url: ajaxUrls.apiUrl.member,
                    action: 'qryUserInfo',
                    data: data
                }).then(function (data) {
                    this.tableData = data.data.items || [];
                    this.paginationData.total = data.data.totalNum || 0;
                }.bind(this)).catch(function (err) {

                })
            }
		},
		components:{
			sidebar,
			card,
			tableDataFail
		}
	}
</script>

<style lang="scss">
	.dialog-form-user{
		.el-form-item{
			margin-bottom: 0;
		}
	}
	.user-vip-record{
		border-top: 1px solid #eee;
		h2 {
			margin: 5px 0;
		}
		.record-wrapper{
			margin-left: 20px;
		}
	}
</style>